<template>
  <div class="flex-1 flex gap-3">
    <div class="w-1/4 bg-white rounded-lg p-3">
      <el-form :model="searchForm" :rules="searchRules" label-width="120px">
        <el-form-item label="患者姓名">
          <el-input v-model="searchForm.name" placeholder="请输入患者姓名" />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="searchForm.id_card"  placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex-1 bg-white rounded-lg p-3">
      <el-form :model="form" ref="ruleFormRef" :rules="rules" status-icon label-width="auto">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="患者姓名：" prop="name">
              <div class="flex gap-2">
                <el-input v-model="form.name" placeholder="请输入患者姓名" disabled/>
                <el-input v-model="form.pinyin" placeholder="拼音" class="w-28" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号：" prop="id_card">
              <el-input v-model="form.id_card" placeholder="请输入身份证号" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别：" prop="gender">
              <el-select v-model="form.gender" placeholder="请选择性别" class="w-full">
                <el-option label="男" value="1" />
                <el-option label="女" value="2" />
              </el-select>
            </el-form-item>
          </el-col>          
          <el-col :span="8">
            <el-form-item label="手机号：" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="民族：">
              <el-select v-model="form.nation" placeholder="请选择民族" class="w-full" filterable>
                <el-option v-for="item in nationOptions" 
                  :key="item.value" 
                  :label="item.label" 
                  :value="item.value" 
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="宗教信仰：">
              <el-select v-model="form.religion" placeholder="请选择宗教信仰" class="w-full">
                <el-option v-for="item in religionOptions" 
                  :key="item.value" 
                  :label="item.label" 
                  :value="item.value" 
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="家庭住址：" prop="address">
              <el-input v-model="form.address" placeholder="请输入家庭住址" />
            </el-form-item>
          </el-col>
          <el-col :span="24" class="w-full text-center">
            <el-form-item class="w-full flex justify-center">
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                保存
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>
  </div>
</template>
<script setup>
  import { ref, watch } from 'vue';
  import { ElMessage } from 'element-plus';
  import { pinyin } from 'pinyin-pro';
  import { saveCustomer, getCustomer } from '@/api/PatientApi';
  const ruleFormRef = ref();
  const searchForm = ref({
    name: '张永',
    id_card: '123456789012345678',
  });
  const searchRules = ref({
    name: [{ required: true, message: '请输入患者姓名', trigger: 'blur' }],
    id_card: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
  });
  const form = ref({
    name: '',
    pinyin: '',
    gender: '',
    id_card: '',
    phone: '',
    nation: '',
    religion: '',
    address: '',
  });
  
  const rules = ref({
    name: [{ required: true, message: '请输入患者姓名', trigger: 'blur' }],
    gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
    id_card: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
    phone: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    address: [{ required: true, message: '请输入家庭住址', trigger: 'blur' }],
  });

  // 民族选项
  const nationOptions = [
    { value: '1', label: '汉族' },
    { value: '2', label: '满族' },
    { value: '3', label: '蒙古族' },
    { value: '4', label: '回族' },
    { value: '5', label: '藏族' },
    { value: '6', label: '维吾尔族' },
    { value: '7', label: '苗族' },
    { value: '8', label: '彝族' },
    { value: '9', label: '壮族' },
    { value: '10', label: '布依族' },
    { value: '11', label: '侗族' },
    { value: '12', label: '瑶族' },
    { value: '13', label: '白族' },
    { value: '14', label: '土家族' },
    { value: '15', label: '哈尼族' },
    { value: '16', label: '其他' }
  ];

  // 宗教信仰选项
  const religionOptions = [
    { value: '1', label: '无宗教信仰' },
    { value: '2', label: '佛教' },
    { value: '3', label: '道教' },
    { value: '4', label: '基督教' },
    { value: '5', label: '天主教' },
    { value: '6', label: '伊斯兰教' },
    { value: '7', label: '其他' }
  ];

  // 监听姓名变化，自动转换拼音
  watch(() => form.value.name, (newName) => {
    if (newName) {
      form.value.pinyin = convertToPinyin(newName);
    } else {
      form.value.pinyin = '';
    }
  });

  // 转换拼音的函数
  const convertToPinyin = (name) => {
    if (!name) return '';
    return pinyin(name, { toneType: 'none', type: 'string' }).replace(/\s+/g, '');
  };

  const search = () => {
    getCustomer(searchForm.value).then(res => {
      if(res.code == 200){
        form.value = res.data;
      }else{
        form.value = {
          name: searchForm.value.name,
          id_card: searchForm.value.id_card,
          pinyin: convertToPinyin(searchForm.value.name),
          gender: '',
          phone: '',
          nation: '',
          religion: '',
          address: '',
        }
        ElMessage.error(res.message);
      }
    })
  }

  // 保存
  const submitForm = async (formEl) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
      if (valid) {
        saveCustomer(form.value).then(res => {
          if(res.code == 200){
            ElMessage.success('提交成功！');
          }else{
            ElMessage.error('提交失败！');
            console.log('submit failed', res.message);
          }
        })
      } else {
        ElMessage.error('请填写完整所有必填项！');
      }
    });
  }

  // 重置
  const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    ElMessage.info('表单已重置');
  }

</script>

<style scoped>
:deep(.el-select) {
  width: 100%;
}

:deep(.el-form-item:last-child) {
  margin-bottom: 0;
  margin-top: 20px;
}

:deep(.el-form-item:last-child .el-form-item__content) {
  justify-content: center;
}

:deep(.el-button + .el-button) {
  margin-left: 12px;
}
</style>

